<template>
  <div class="index">
    <v-nav />
    <div class="items" v-if="configIndex.home_class_export_report||configIndex.home_pc_fb">
      <a v-if="configIndex.home_pc_fb" :href="conf.fbUrl+'?sysCode='+userInfo.sysCode+'&accessToken='+accessToken+'&openId=1&channel=1&teacherId='+userInfo.userId" target="_brank">
        <img src="../../assets/img/add-fb.png" alt="" class="i-img">
        <span class="note" v-if="note">
        <span>{{note}}</span>
        </span>
      </a>
      <img v-if="configIndex.home_class_export_report" class="export i-img" src="../../assets/img/export-ach.png" alt="" @click="$refs.exportAch.changeDialog()">
      <img src="../../assets/img/shenglue.png" alt="">
    </div>
    <div v-else class="welcome">欢迎来到教学赋能平台</div>
    <export-ach  v-if="configIndex.home_class_export_report" ref="exportAch"></export-ach>
  </div>
</template>

<script>
import VNav from '../common/Nav.vue'
import { mapGetters, mapActions } from 'vuex'
import storage from 'lib/storage'
import conf from 'lib/conf'
import io from 'lib/io'
import ExportAch from '../common/ExportAch.vue'
export default {
  name: 'index',
  components: {
    VNav,
    ExportAch
  },
  data() {
    return {
      userInfo: storage.getCurrentUserInfo(),
      accessToken: storage.getAccessToken(),
      conf,
      note:0
    }
  },
  computed: {
    ...mapGetters(['loginSuccess']),
    ...mapGetters({
      configIndex: 'config'
    })
  },
  created() {
    this.config()
    this.getNote()
  },
  // beforeUpdate() {
  //   this.config()
  // },
  methods: {
    ...mapActions(['config']),
        getNote(){
            io.post(io.getTeacherUnReadCount,{sysCode:this.userInfo.sysCode,accessToken:this.accessToken,openId:1,channel:1, teacherId:this.userInfo.userId},(ret)=>{
              console.log('xxx',ret)
              if(ret>99){
                this.note='99+'
              }else{
                this.note=ret
              }
            })
        },
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.index {
  .welcome {
    margin-top: 100px;
    text-align: center;
    font-size: 18px;
  }
}

.items {
  margin-top: 70px;
  text-align: center;
  a{
    position: relative;
  }
  img {
    margin: 0 8px;
  }
  .i-img:hover {
    box-shadow: 0px 0px 14px 4px rgba(48, 48, 49, 0.64);
  }
  .export {
    cursor: pointer;
  }
}
.note{
  position: absolute;
  right:15px;
  bottom: 70px;
  span{
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    background: #FF0606;
    padding: 1px 6px;
    border-radius: 10px 10px 10px 0;
  }
}
</style>
